/**
 * 数据说明：
 * nodes数组，用于存放节点的数据信息，每个节点使用对象的形式
 * node对象属性包括：
 *  {
      id: '',  --- id
      size: ,  --- 节点大小
      label: 'xxx 交换机 \n xxx-1.0.1 bate',  --- 节点显示名称
      text: '\ue6ec',  --- 节点显示的icon图标
      isCenter: true,  --- 判断单设备中心节点
      isClick: false,  --- 是否点击的标识
      style: {  --- 节点的配置信息
        fill: 'red',
        opacity: 1, //
        fillOpacity: 1,
        cursor: 'auto',
      },
      labelCfg: { 
        style: {
          fill: "red",
        },
        position: 'bottom',
        offset: [110, 10, 10, 10],
      }
 *  isFisrtNodes等字段，用于区分节点的层级，后续可考虑使用一个变量赋不同值来区分，不适应boolean类型
 *  节点的层级标识，现使用siteFlag 标识，String 类型
 *  具体数据结构参考 force_directed.json 文件（新建了web服务器，实现发送请求获取数据）。
 *edges数组，用于存放边的数据信息，每个边使用对象的形式
 * edge对象属性：
 * {
      source: 'node0',  --- 源目标节点id
      target: 'node1',  --- 目标节点id
      type: 'line',  --- 边的类型
      label: 'node-edge1',  --- 边显示名称
      lineNum: 3,  --- 实际节点连接的边数
    },
 */
drawData = {
  nodes: [{
      id: 'node0',
      size: 80,
      label: 'xxx 交换机 \n xxx-1.0.1 bate',
      text: '\ue6ec',
      isCenter: true,
      isClick: false,
      style: {
        fill: 'red',
        opacity: 1, //
        fillOpacity: 1,
        cursor: 'auto',
        // shadowColor: 'cyan',
        // shadowBlur: 10
      },
      labelCfg: {
        style: {
          fill: "red",
        },
        position: 'bottom',
        offset: [110, 10, 10, 10],
      },
      backgroundConfig: {
        fill: 'white', //节点的背景色
        padding: [2, 2, 2, 2],
        radius: 2,
      }, // 自定义项，用于判读是否需要圆背景
    },
    {
      id: 'node1',
      size: 50,
      label: 'node1',
      isCenter: false,
      isClick: false,
      text: '\ue68c',
      isFisrtNodes: true,
      style: {
        fill: 'skyblue',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node2',
      size: 50,
      label: 'node2',
      isCenter: false,
      isClick: false,
      text: '\ue68c',
      isFisrtNodes: true,
      style: {
        fill: 'skyblue',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node3',
      size: 50,
      label: 'node3',
      isCenter: false,
      isClick: false,
      text: '\ue68c',
      isFisrtNodes: true,
      style: {
        fill: 'skyblue',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      }
    },
    {
      id: 'node4',
      size: 50,
      label: 'node4',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      text: '\ue78a',
      isFisrtNodes: true,
      style: {
        fill: 'skyblue',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node5',
      size: 50,
      label: 'node5',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      text: '\ue78a',
      isFisrtNodes: true,
      style: {
        fill: 'skyblue',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node6',
      size: 30,
      label: 'node6',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      text: '\ue78a',
      isSubNodes: true,
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node7',
      size: 30,
      label: 'node7',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      text: '\ue78a',
      isSubNodes: true,
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node8',
      size: 30,
      label: 'node8',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node9',
      size: 30,
      label: 'node9',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node10',
      size: 30,
      label: 'node10',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node11',
      size: 30,
      label: 'node11',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node12',
      size: 30,
      label: 'node12',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node13',
      size: 30,
      label: 'node13',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node14',
      size: 30,
      label: 'node14',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node15',
      size: 30,
      label: 'node15',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node16',
      size: 30,
      label: 'node16',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isSubNodes: true,
      text: '\ue78a',
      style: {
        fill: 'green',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "skyblue"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node17',
      size: 15,
      label: 'node17',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isThirdNodes: true,
      text: '\ue679',
      style: {
        fill: 'red',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "orange"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
    {
      id: 'node18',
      size: 15,
      label: 'node18',
      isCenter: false,
      isClick: false,
      isLeaf: true,
      isThirdNodes: true,
      text: '\ue743',
      style: {
        fill: 'black',
        cursor: 'pointer',
      },
      labelCfg: {
        style: {
          fill: "purple"
        },
      },
      backgroundConfig: {
        fill: 'white',
        padding: [2, 2, 2, 2],
        radius: 2,
      },
    },
  ],
  edges: [{
      source: 'node0',
      target: 'node1',
      type: 'line',
      label: 'node-edge1',
      lineNum: 3,
    },
    {
      source: 'node0',
      target: 'node2',
      type: 'line',
      label: 'node-edge2',
      lineNum: 2,
    },
    {
      source: 'node0',
      target: 'node3',
      type: 'line',
      label: 'node-edge3',
      lineNum: 4,
    },
    {
      source: 'node0',
      target: 'node4',
      type: 'line',
      label: 'node-edge4',
      lineNum: 5,
    },
    {
      source: 'node0',
      target: 'node5',
      type: 'line',
      label: 'node-edge5',
      lineNum: 2,
    },
    {
      source: 'node1',
      target: 'node6',
      type: 'line',
      label: 'node-edge6',
      lineNum: 2,
    },
    {
      source: 'node1',
      target: 'node7',
      type: 'line',
      label: 'node-edge7',
      lineNum: 2,
    },
    {
      source: 'node2',
      target: 'node8',
      type: 'line',
      label: 'node-edge8',
      lineNum: 2,
    },
    {
      source: 'node2',
      target: 'node9',
      type: 'line',
      label: 'node-edge9',
      lineNum: 2,
    },
    {
      source: 'node2',
      target: 'node10',
      type: 'line',
      label: 'node-edge10',
      lineNum: 2,
    },
    {
      source: 'node2',
      target: 'node11',
      type: 'line',
      label: 'node-edge11',
      lineNum: 2,
    },
    {
      source: 'node2',
      target: 'node12',
      type: 'line',
      label: 'node-edge12',
      lineNum: 2,
    },
    {
      source: 'node2',
      target: 'node13',
      type: 'line',
      label: 'node-edge13',
      lineNum: 2,
    },
    {
      source: 'node3',
      target: 'node14',
      type: 'line',
      label: 'node-edge14',
      lineNum: 2,
    },
    {
      source: 'node3',
      target: 'node15',
      type: 'line',
      label: 'node-edge15',
      lineNum: 2,
    },
    {
      source: 'node3',
      target: 'node16',
      type: 'line',
      label: 'node-edge16',
      lineNum: 2,
    },
    {
      source: 'node16',
      target: 'node17',
      type: 'line',
      label: 'node-edge17',
      lineNum: 2,
    },
    {
      source: 'node16',
      target: 'node18',
      type: 'line',
      label: 'node-edge18',
      lineNum: 2,
    }
  ]
}